import Vue from 'vue'
import VueRouter from 'vue-router'
import VueI18n from 'vue-i18n'

import {
    Aside,
    Autocomplete,
    Badge,
    Button,
    Card,
    Col,
    ColorPicker,
    Container,
    Divider,
    Form,
    FormItem,
    Image,
    Input,
    Main,
    Menu,
    MenuItem,
    Message,
    Option,
    OptionGroup,
    Radio,
    RadioGroup,
    Row,
    Select,
    Scrollbar,
    Slider,
    Submenu,
    Switch,
    TabPane,
    Tabs,
    Tooltip,
    Collapse,
    CollapseItem,
    RadioButton,
    Checkbox,
    Timeline,
    TimelineItem,
    InputNumber,
    Popover,
    Alert,
    Link,
    Skeleton,
    SkeletonItem,
    Dialog,
    Tag,
    Steps,
    Step,
    Carousel,
    CarouselItem,
    Notification,
    Table,
    TableColumn,
    Popconfirm,
    Loading,
    MessageBox
} from 'element-ui'
import axios from 'axios'

import App from './App.vue'
import Layout from './layout'
import Home from './views/Home.vue'
import StyleGenerator from './views/StyleGenerator'
import Help from './views/Help'
import Shop from "./views/Shop";
import Room from './views/Room.vue'
import CaptainFx from "./views/CaptainFx";
import NotFound from './views/NotFound.vue'
import Cele from './views/FullScreenCele';
import TranslateBackend from './views/translateBackend'
import VueQrcode from "@chenfengyuan/vue-qrcode";

import zh from './lang/zh'
import ja from './lang/ja'
import en from './lang/en'

if (process.env.NODE_ENV === 'development') {
    // 开发时使用localhost:8080
    axios.defaults.baseURL = 'http://localhost:8080'
}
axios.defaults.timeout = 10 * 1000

Vue.use(VueRouter)
Vue.use(VueI18n)
// 初始化element
Vue.use(Aside)
Vue.use(Autocomplete)
Vue.use(Badge)
Vue.use(Button)
Vue.use(Card)
Vue.use(Col)
Vue.use(ColorPicker)
Vue.use(Container)
Vue.use(Divider)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Image)
Vue.use(Input)
Vue.use(Main)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Row)
Vue.use(Select)
Vue.use(Scrollbar)
Vue.use(Slider)
Vue.use(Submenu)
Vue.use(Switch)
Vue.use(TabPane)
Vue.use(Tabs)
Vue.use(Tooltip)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(RadioButton)
Vue.use(Checkbox)
Vue.use(Timeline)
Vue.use(TimelineItem)
Vue.use(InputNumber)
Vue.use(Popover)
Vue.use(Alert)
Vue.use(Link)
Vue.use(Skeleton)
Vue.use(SkeletonItem)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Step)
Vue.use(Steps)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Popconfirm)
Vue.use(Loading)
Vue.component(VueQrcode.name, VueQrcode);
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification
Vue.prototype.$prompt = MessageBox.prompt

Vue.config.ignoredElements = [
    /^yt-/
]

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: Layout,
            children: [
                {path: '', component: Home},
                {path: 'stylegen', name: 'stylegen', component: StyleGenerator},
                {path: 'help', name: 'help', component: Help},
                {path: 'shop', name: 'shop', component: Shop},
                {path: '/captain-fx', name: 'captainFx', component: CaptainFx},
                {path: 'translate-privilege-backend', name: 'translateBackend', component:TranslateBackend}
            ]
        },
        {path: '/room/test', name: 'test_room', component: Room, props: route => ({strConfig: route.query})},
        {
            path: '/room/open-live',
            name: 'room',
            component: Room,
            props(route) {
                let roomId = 1
                return {roomId, strConfig: route.query}
            }
        },
        {
            path: '/fullScreenCele/open-live',
            name: 'cele',
            component: Cele,
        },
        {path: '/fullScreenCele/test', name: 'test_cele', component: Cele, props: route => ({strConfig: route.query})},
        {path: '*', component: NotFound}
    ]
})

let locale = window.localStorage.lang
if (!locale) {
    let lang = navigator.language
    if (lang.startsWith('zh')) {
        locale = 'zh'
    } else if (lang.startsWith('ja')) {
        locale = 'ja'
    } else {
        locale = 'en'
    }
}
const i18n = new VueI18n({
    locale,
    fallbackLocale: 'en',
    messages: {
        zh, ja, en
    }
})

new Vue({
    render: h => h(App),
    router,
    i18n
}).$mount('#app')
